<template>
	<view :style="objColor">
		<nav v-if="!showCustom" title="积分" image="https://oos-cn.ctyunapi.cn/front-end/static/back.png"
			txtColor="#18181A" :show_bol="false"></nav>
		<navLod v-if="showCustom" txtColor="#18181A" :bgColor="bgColor"
			image="https://oos-cn.ctyunapi.cn/front-end/static/back.png" title="积分" :show_bol="false"></navLod>
		<view>
			<view class="header">
				<!-- <image class="header-image" src="https://oos-cn.ctyunapi.cn/front-end/static/static/home_bg.png"
					style="width: 100%"></image>
				<view class="header-top current-integral"
					:style="'margin-top:' + (widnowH <= 568 ? bar_Height + 45 : bar_Height + 50) + 'px;'">
					<view class="integra-text">当前积分
					<view class="more" @click="toExchange">
						积分兑换
						<image
							:src="sellerNo=='jw'?'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/turn-blue.png':'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/turn_act.png'">
						</image>
					</view>
					</view>
					<view class="dashboard" v-if="isShowCanvas">

						<l-echart ref="chart"></l-echart>
					</view>
					<view>
						<view class="integral-rules" @tap="openIntegralRule">积分规则</view>
						<image src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/Illustration.png" alt=""
							class="Illustration-img" />
					</view>
				</view> -->
				<view class="integral-subsidiary" :style="'padding-top:' + (widnowH <= 736 ? 0 : 20) + 'px;'">
					<view class="subsidiary">积分明细</view>
					<!-- <view class="more" @tap="lookMore">
						查看更多
						<image
							:src="sellerNo=='jw'?'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/turn-blue.png':'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/turn_act.png'">
						</image>
					</view> -->

					<view class="more" @tap="openIntegralRule">
						积分规则
					</view>
				</view>
				<view class="integral-list">
					<view class="integral-list-item" v-if="integralList.length!=0" v-for="(item, index) in integralList" :key="index">
						<view class="integral-list-item-content">
							<view class="integral-list-item-children1">
								<view class="type">
									<text v-if="item.type==1">{{ item.activityName }}</text>
									<text v-if="item.type==6">{{ item.activityName }}</text>
									<text v-if="item.type==7">{{ item.activityName }}</text>
									<text v-if="item.type==8">商城消费退款</text>
									
									<text v-if="item.type==2">积分兑换</text>
									<text v-if="item.type==3">作废</text>
									<text v-if="item.type==4">过期</text>
								</view>

								<view>
									<text v-if="item.amount<=0">{{ item.amount }}</text>
									<text v-else class="price">{{ item.amount }}</text>
								</view>

							</view>
							<view class="integral-list-item-children2">
								<view class="integral-date">{{ item.createTime }}</view>
							</view>
						</view>
					</view>
					<view v-if="integralList.length==0">
						<Upgrading text1="您暂无收支记录~"></Upgrading>
					</view>
				<view v-if="integralList.length==0" class="goBtn" @click="goRecharge">去充电</view>
				</view>
				<view class="returnToTop" v-if="!no_scroll" @tap="goTop">
					<image src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/ReturnTotop.png"
						class="returnToTop-img"></image>
				</view>
			</view>
		</view>
		<u-popup :show="ruleVisible" :zIndex='10080' @close="onClose" :round="20" mode='center'
			custom-style="padding:0rpx;background: #FFFFFF;border-radius: 16rpx;width:630rpx;">
			<view class="integral-rules-wrap">
				<view class="integral-rules" style="box-sizing: border-box;">
					<view class="integral-rules-text">积分规则</view>
					<!-- <view class="integral-rules-content">
						<rich-text :nodes="integralRule" class="integral-rules-bottom" style="word-break: break-all">
						</rich-text>
					</view> -->
					<view v-if="sellerNo=='tjhz'" class="integral-rules-zwsx">积分功能暂未上线</view>
					<template  v-else>
						<view class="integral-rules-content">
							<view class="t_title">积分换算类型</view>
							<view>金额换算积分: {{ integralRule.pointsSetting }}消费金额(元)={{ integralRule.pointsReciprocity }}分</view>
						</view>
						<view class="integral-rules-content">
							<view class="t_title">积分有效期</view>
							<view v-if="integralRule.validityPeriodSetting == 1">永久</view>
							<view v-if="integralRule.validityPeriodSetting == 2">{{ integralRule.pointsTerm }}天</view>
							<view v-if="integralRule.validityPeriodSetting == 3">{{ integralRule.pointsFixedDate }}</view>
						</view>
					</template>
					
					
					<view class="btn" @click="onClose">我知道了</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	'use strict';
	import nav from '../../../components/nav/nav';
	import navLod from '../../../components/navLod/navLod';
	import weappPluginDashboard from '../../../components/weapp-plugin-dashboard/miniprogram_dist/index';
	// import vanDialog from '@vant/weapp/dialog/index';
	import Upgrading from '../../../components/upgrading/upgrading';
	import * as echarts from 'echartsPages/static/js/echarts.js'
	import lEchart from '../../components/lime-echart/components/l-echart/l-echart'
	// import jerryGauge from '../../../components/jerryGauge/jerryGauge'             

	import {
		integralList,
		integralListV2,
		getGrowthCenterInfoList,
		getGradeRuleSetting,
	} from '../../../api/marketing/vip'
	import {
		getIntegral,
		getMemberGradeRule
	} from '../../../api/https';
	// exports.__esModule = true; // mine/pages/integral/integral.ts
	var app = getApp();
	var https_1 = require('./../../../api/https.js');
	export default {
		components: {
			nav,
			navLod,
			weappPluginDashboard,
			// vanDialog,
			Upgrading,
			lEchart
			// jerryGauge
		},
		data() {
			return {
				sellerNo: app.globalData.sellerNo,
				integralList: [],
				integralRule: {},
				ruleVisible: false,
				gap: 0,
				maxGap: 10000,
				no_scroll: true,
				showCustom: '',
				bgColor: '',
				widnowH: 0,
				bar_Height: 0,
				myColors: [],
				isShowCanvas: true
			};
		},
		onLoad: function() {
			this.memberGradeRule();
			this.getMemberRuleList();
			this.IntegralDetail();
		},
		onPageScroll: function(e) {
			if (e.scrollTop > 200) {
				this.no_scroll = false
			} else {
				this.no_scroll = true
			}
		},
		methods: {
			async init_echarts() {
				const color = this.objColor2.textColor
				console.log(this.objColor2, 'objColor2')

				let option = {
					series: [{
						type: 'gauge',
						startAngle: 180,
						endAngle: 0,
						min: 0,
						max: this.maxGap,
						splitNumber: 10,
						itemStyle: {
							color: '#6DB12E',
							// shadowColor: color,
							// shadowBlur: 10,
							shadowOffsetX: 0,
							shadowOffsetY: 0
						},
						progress: {
							show: true,
							roundCap: true,
							width: 10
						},
						pointer: {
							icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
							length: '75%',
							width: 10,
							offsetCenter: [0, '5%']
						},
						axisLine: {
							roundCap: true,
							lineStyle: {
								width: 10
							}
						},
						axisTick: {
							splitNumber: 2,
							lineStyle: {
								width: 2,
								color: '#999'
							}
						},
						splitLine: {
							length: 12,
							lineStyle: {
								width: 3,
								color: '#999'
							}
						},
						axisLabel: {
							distance: 30,
							color: '#999',
							fontSize: 8
						},
						title: {
							show: false
						},
						detail: {
							backgroundColor: '#fff',
							// borderColor: '#999',
							// borderWidth: 2,
							width: '10%',
							lineHeight: 40,
							height: 40,
							// borderRadius: 8,
							offsetCenter: [0, '11%'],
							valueAnimation: true,
							formatter: function(value) {
								return '{value|' + value.toFixed(0) + '}{unit|}'
							},
							rich: {
								value: {
									fontSize: 10,
									fontWeight: 'bolder',
									color: '#777'
								},
								unit: {
									fontSize: 20,
									color: '#999',
									// padding: [-40, 0, 0, 10]   
								}
							}
						},
						data: [{
							value: this.gap
						}]
					}]
				}
				this.$nextTick(() => {
					this.$refs.chart.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			},
			//积分兑换
			toExchange(){
				uni.navigateTo({
					// url: ''
				});
			},
			//去充电
			goRecharge(){
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			lookMore() {
				console.log(999)
				uni.navigateTo({
					url: '../../../mine/pages/integralSubsidiary/integralSubsidiary'
				});
			},
			memberGradeRule() {
				
			// "pointsSetting": 1,  积分设置（消费金额（元）/充电电量（元））        
			// "pointsReciprocity": 10,   获得积分       
			//  "validityPeriodSetting": 2, 积分有效期设置（1=-永久,2=-固定天数,3=-固定日期） 
			//  "pointsTerm": 11,  积分有效期        
			//  "pointsFixedDate": "2023-12-02", 固定日期积分有效期

				getGradeRuleSetting()
					.then(res => {
						if (res.code == 200) {
							console.log('积分规则==>',res);
							this.integralRule = res.data || {}
						}
					})
			},
			getMemberRuleList() {
				getGrowthCenterInfoList().then((res) => {
					if (res.code == 200) {
						let maxGap = res.data.maxPoints;
						// that.gap = Number(res.data.consumeIntegral),
						this.maxGap = maxGap
					}

				});
			},
			IntegralDetail() {
				integralListV2()
					.then(res => {
						if (res.code == 200) {
							// if(res.data.distributePoint){
							// this.gap = res.data.distributePoint
							// }
							// this.integralList = res.data.marketAppUserIntegralInoutList

							this.integralList = res.data

							// this.init_echarts()
							// console.log('that.gap', this.gap)
							console.log('积分列表', this.integralList)
						}
					})
			},

			openIntegralRule() {
				this.memberGradeRule();

				this.ruleVisible = true
				this.isShowCanvas = true
			},

			goTop() {
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
					});
				}
			},

			onClose() {
				console.log('占位：函数 onClose 未声明');
				this.isShowCanvas = true
				this.ruleVisible = false
			}
		}
	};
</script>
<style lang="less" scoped>
	@import url('integral.less');
</style>